<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业三</title>
</head>
<style>
    div{
        width: 312px;
        height: 312px;
        border: 2px #e05451 solid;
        position: absolute;
    }
    a {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #ff88fc;
        color: white;
        text-decoration: none;
        text-align: center;
        line-height: 100px;
        position: relative;
    }
    a:hover{
        background-color: blue;
    }
    #a1{
        top: 6px;
        left: 6px;
    }
    #a2{
        top: 6px;
        left: 100px;
    }
    #a3{
        top: 206px;
        right: 206px;
    }
    #a4{
        top: 106px;
        left: 206px;
    }
    #a5{
        top: 6px;
    }
</style>
<body>
<div>
    <a id="a1" href="#">链接1</a>
    <a id="a2" href="#">链接2</a>
    <a id="a3" href="#">链接3</a>
    <a id="a4" href="#">链接4</a>
    <a id="a5" href="#">链接5</a>
</div>
</body>
</html>